<template>
  <el-card style="margin-bottom:20px;width: 300px;height: 700px;">
    <div slot="header" class="clearfix">
      <span>个人信息</span>
    </div>
    <div class="user-profile">
      <div class="box-center">
        <userAvatar />
      </div>
    </div>
    <div class="user-bio">
      <div class="user-education user-bio-section">
        <div class="user-bio-section-body">
          <div style="font-size: 18px;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">
            <li class="list-group-item">
              用户昵称
              <div class="pull-right">{{ user.name }}</div>
            </li>
            <li class="list-group-item">
              手机号码
              <div class="pull-right">{{ originalPhoneNumber }}</div>
            </li>
            <li class="list-group-item">
              用户邮箱
              <div class="pull-right">{{ user.email }}</div>
            </li>
            <li class="list-group-item">
              工号
              <div class="pull-right">{{ user.number }}</div>
            </li>
            <li class="list-group-item">
              职位
              <div class="pull-right">{{ user.post }}</div>
            </li>
            <li class="list-group-item">
              所选专业
              <div class="pull-right">{{ user.selectedMajor }}</div>
            </li>
            <li class="list-group-item">
              学院
              <div class="pull-right">{{ user.college }}</div>
            </li>
            <li class="list-group-item">
              系部
              <div class="pull-right">{{ user.department }}</div>
            </li>
            <li class="list-group-item">
              所属专业
              <div class="pull-right">{{ user.currentMajor }}</div>
            </li>
            <li class="list-group-item">
              创建日期
              <div class="pull-right">{{ user.createTime }}</div>
            </li>
            <li class="list-group-item">
              更新时间
              <div class="pull-right">{{ user.updateTime }}</div>
            </li>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import userAvatar from './userAvatar'

export default {
  components: { userAvatar },
  props: {
    user: {
      type: Object,
      default: () => ({
        name: '',
        email: '',
        avatar: '',
        role: ''
      })
    },
    information: {
      type: Object,
      default: () => ({
        number: '',
        isAuthentication: '', // 身份认证状态
        createTime: '',
        updateTime: ''
      })
    }
  },
  computed: {
    originalPhoneNumber() {
      return this.maskPhoneNumber(this.user.phoneNumber)
    },
    department() {
      return this.getDepartment()
    }
  },
  methods: {
    maskPhoneNumber(phoneNumber) {
      console.log('maskPhoneNumber', phoneNumber)
      if (!phoneNumber) return ''
      return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    }
  },
  getDepartment() {
    this.major.majorId.split
  }
}
</script>

<style lang="scss" scoped>
.box-center {
  margin: 0 auto;
  display: table;
  text-align: center;
}

.user-profile {
  .box-center {
    padding-top: 10px;
  }
}

.user-bio {
  margin-top: 60px;
  color: #606266;

  span {
    padding-left: 4px;
  }

  .user-bio-section {
    font-size: 14px;
    padding: 15px 0;
  }
}
</style>
